<template>
  <div class="container">
    <img src="@/assets/noData.webp" class="no_data_img" />
    <span v-if="isMe" class="no-more-text">
      Nothing posted yet... Click
      <span @click="goNexLab" class="cursor-pointer underline">NexLab</span>
      to create your first post
    </span>
    <span v-else class="no-more-text">This creator is preparing for the first design</span>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import { useUserStore } from '@/store/user';
  import router from '@/router/route';

  const userStore = useUserStore();
  const userInfo = computed(() => userStore.user);

  const props = defineProps<{
    uid: number | string;
  }>();

  const isMe = computed(() => {
    return props.uid === userInfo.value?.uid;
  });

  const goNexLab = () => {
    router.push({ path: '/generator' });
  };
</script>

<style scoped lang="scss">
  .container {
    width: 100%;
    padding: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .no_data_img {
      width: 80px;
      height: 80px;
    }
    .no-more-text {
      max-width: 500px;
      padding: 12px 24px;
      color: #7a7a7a;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      display: flex;
      align-items: center;
      gap: 6px;
    }
  }
</style>
